/**
 * VUEshop
 * ============================================================================
 * * 版权所有 2015-2027 深圳搜豹网络科技有限公司，并保留所有权利。
 * 网站地址: http://www.vueshop.com.cn
 * ----------------------------------------------------------------------------
 * 这不是一个自由软件！您只能在不用于商业目的的前提下对程序代码进行修改和使用 .
 * 不允许对程序代码以任何形式任何目的的再发布。
 * ============================================================================
 * $Author: soubao-java 2020-07-22 $
 */<template>
  <div class="page">
    <div class="fixed-bar">
      <div class="item-title">
        <a class="back" href="javascript:history.back(-1)" title="返回列表">
          <i class="fa fa-arrow-circle-o-left"></i>
        </a>
        <div class="subject">
          <h3>商品订单</h3>
          <h5>商城实物商品交易订单查询及管理</h5>
        </div>
        <el-button
          type="primary"
          round
          size="small"
          style="margin-left:20px"
          @click="dialogFormVisible = true"
          class="el-icon-printer"
        >&nbsp;打印配货单</el-button>
      </div>
    </div>
    <div class="ncap-order-style">
      <div class="titile">
        <h3></h3>
      </div>
      <div class="ncap-order-details" v-if="order">
        <div class="tabs-panels">
          <div class="misc-info">
            <h3>基本信息</h3>
            <dl>
              <dt>订单 ID：</dt>
              <dd>{{order.order_id}}</dd>
              <dt>订单号：</dt>
              <dd>{{order.order_sn}}</dd>
              <dt>会员：</dt>
              <dd v-if="order.user">{{order.user.nickname}} ID：{{order.user_id}}</dd>
            </dl>
            <dl>
              <dt>E-Mail：</dt>
              <dd>{{order.email}}</dd>
              <dt>电话：</dt>
              <dd>{{order.mobile}}</dd>
              <dt>应付金额：</dt>
              <dd>{{order.order_amount | toFixed}}</dd>
            </dl>
            <dl>
              <dt>订单状态：</dt>
              <dd>
                {{order.order_status_detail}} / {{order.pay_status_detail}}
                <span
                  v-if="order.pay_code == 'cod'"
                  style="color: red"
                >(货到付款)</span>
                / {{order.shipping_status_detail}}
              </dd>
              <dt>下单时间：</dt>
              <dd>{{order.add_time_detail || 'N'}}</dd>
              <dt>支付时间：</dt>
              <dd>{{order.pay_time_detail || 'N'}}</dd>
            </dl>
            <dl>
              <dt>支付方式：</dt>
              <dd>{{order.pay_name}}</dd>
              <dt>发票抬头：</dt>
              <dd>{{order.invoice_title || 'N'}}</dd>
              <dt>纳税人识别号：</dt>
              <dd>{{order.taxpayer ||'N'}}</dd>
            </dl>
          </div>
          <div class="addr-note">
            <h4>收货信息</h4>
            <dl>
              <dt>收货人：</dt>
              <dd>{{order.consignee}}</dd>
              <dt>联系方式：</dt>
              <dd>{{order.mobile}}</dd>
            </dl>
            <dl>
              <dt>收货地址：</dt>
              <dd>
                <span v-for="region in order.regions">{{region.name}},</span>
                {{order.address}}
              </dd>
            </dl>
            <dl>
              <dt>邮编：</dt>
              <dd>{{order.zipcode || 'N'}}</dd>
            </dl>
            <dl>
              <dt>配送方式：</dt>
              <dd v-if="order.shop_id != 0">自提</dd>
              <dd v-else v-for="d in deliverys">{{d.shipping_name}} -- {{d.invoice_no}}</dd>
            </dl>
            <dl
              v-if="order.shipping_status == 0 && order.order_status == 3 && order.pay_status > 0"
            >
              <dt>取消订单留言：</dt>
              <dd>{{order.user_note}}</dd>
            </dl>
          </div>
          <div v-if="order.shipping_status == 1 && express">
            <div class="goods-info">
              <h4>物流信息</h4>
              <table id="express_info" v-for="e in express">
                <thead>
                  <tr>
                    <th width="8%">操作时间</th>
                    <th>状态</th>
                  </tr>
                </thead>
                <tbody>
                  <tr v-for="(data, index) in e.data">
                    <td>{{data.time}}</td>
                    <td>{{data.context}}</td>
                  </tr>
                </tbody>
              </table>
            </div>
          </div>
          <div class="contact-info">
            <h3>费用信息</h3>
            <dl>
              <dt>小计：</dt>
              <dd>{{order.goods_price | toFixed}}</dd>
              <dt>运费：</dt>
              <dd>+{{order.shipping_price | toFixed}}</dd>
              <dt>积分 (-{{order.integral}})：</dt>
              <dd>-{{order.integral_money}}</dd>
            </dl>
            <dl>
              <dt>余额抵扣：</dt>
              <dd>-{{order.user_money | toFixed}}</dd>
              <dt>优惠券抵扣：</dt>
              <dd>-{{order.coupon_price | toFixed}}</dd>
              <dt>价格调整：</dt>
              <dd>{{order.discount | toFixed}}</dd>
            </dl>
            <dl>
              <dt>订单优惠：</dt>
              <dd>-{{order.order_prom_amount | toFixed}}</dd>
              <dt>应付：</dt>
              <dd>{{order.order_amount | toFixed}}</dd>
            </dl>
          </div>
          <div class="goods-info">
            <h4>商品信息</h4>
            <table>
              <thead>
                <tr>
                  <th>商品编号</th>
                  <th colspan="2">商品</th>
                  <th>规格属性</th>
                  <th>数量</th>
                  <th>单品价格</th>
                  <th>会员折扣价</th>
                  <th>单品小计</th>
                </tr>
              </thead>
              <tr v-for="og in order.order_goods" align="center">
                <td width="80">{{og.goods_sn || "--"}}</td>
                <td width="80">
                  <div class="goods-thumb">
                    <a href target="_blank">
                      <img
                        alt
                        :src="apiHead + '/mall/goods/thumb_image?goods_id='+og.goods_id+'&width=200&height=200'"
                      />
                    </a>
                  </div>
                </td>
                <td class="w110">
                  <a href target="_blank">{{og.goods_name}}</a>
                  <br />
                </td>
                <td class="w120">{{og.spec_key_name}}</td>
                <td class="w60">{{og.goods_num}}</td>
                <td class="w100">{{og.goods_price | toFixed}}</td>
                <td class="w90">{{og.member_goods_price | toFixed}}</td>
                <td class="w80">{{og.goods_total | toFixed}}</td>
              </tr>
            </table>
          </div>
          <div class="total-amount contact-info">
            <h3>
              订单总额：
              <strong class="red_common">&yen;{{order.goods_price | toFixed}}</strong>
            </h3>
          </div>
          <div
            class="contact-info"
            v-if="order.shipping_status == 0 && order.order_status == 3 && order.pay_status > 0"
          >
            <h3>退款处理</h3>
            <div v-if="order.is_able_admin_refund">
              <dl class="row">
                <dt class="tit">
                  <label>审核意见：</label>
                </dt>
                <dd class="opt" style="margin-left:20px">
                  <el-radio-group v-model="payStatus">
                    <el-radio :label="3">同意退款</el-radio>
                    <el-radio :label="4">拒绝退款</el-radio>
                  </el-radio-group>
                </dd>
              </dl>
              <dl class="row refund_type" v-if="payStatus == 3">
                <dt class="tit">
                  <label>退款方式：</label>
                </dt>
                <dd class="opt" style="margin-left:20px">
                  <el-radio-group v-model="refundType">
					<el-radio :label="0">退到用户余额</el-radio>
                    <el-radio :label="1" v-if="order.is_able_refund_back">支付原路退回</el-radio>
                    <el-radio disabled v-if="!order.is_able_refund_back">支付原路退回(不支持)</el-radio>
                  </el-radio-group>
                </dd>
              </dl>
              <dl class="row">
                <dt class="tit">
                  <em style="color: red;font-size: 16px;">*&nbsp;</em>
                  <label for="note">处理备注：</label>
                </dt>
                <dd class="opt" style="margin-left:20px">
                  <el-input
                    type="textarea"
                    v-model="order.admin_note"
                    maxlength="200"
                    style="width:350px"
                  />
                </dd>
              </dl>
              <dl class="row">
                <dt class="tit"></dt>
                <dd class="opt" style="margin-left:20px">
                  <el-button type="primary" @click="refundHandle()" :loading="isLoading">确认提交</el-button>
                </dd>
              </dl>
            </div>
            <dl class="row" v-if="order.pay_status == 3">
              <dt class="tit">
                <label>退款信息：</label>
              </dt>
              <dd class="opt">
                <label>已退款</label>
              </dd>
            </dl>
            <dl class="row" v-if="order.pay_status == 4">
              <dt class="tit">
                <label for="note">处理备注：</label>
              </dt>
              <dd class="opt" style="margin-left:10px">
                <el-input
                  type="textarea"
                  v-model="order.admin_note"
                  maxlength="200"
                  style="width:350px"
                  readonly
                />
              </dd>
            </dl>
          </div>
          <div class="goods-info" v-else>
            <h4>操作记录</h4>
            <table>
              <thead>
                <tr>
                  <th>操作者</th>
                  <th>操作时间</th>
                  <th>订单状态</th>
                  <th>付款状态</th>
                  <th>发货状态</th>
                  <th>描述</th>
                  <th>备注</th>
                </tr>
              </thead>
              <tr v-for="al in actionLog" align="center">
                <td>{{al.action_user_desc}}</td>
                <td>{{al.log_time_desc}}</td>
                <td>{{al.order_status_desc}}</td>
                <td>
                  {{al.pay_status_desc}}
                  <span
                    v-if="order.pay_code == 'code'"
                    style="color: red"
                  >(货到付款)</span>
                </td>
                <td>
                  {{al.shipping_status_desc}}
                  <span
                    v-if="order.shop_id != 0 && order.pay_status == 1"
                  >{{al.shipping_status == 1 ? '已自提' : '待自提'}}</span>
                </td>
                <td>{{al.status_desc}}</td>
                <td>{{al.action_note}}</td>
              </tr>
            </table>
          </div>
        </div>
      </div>
    </div>
    <el-dialog
      title="打印订单"
      width="56%"
      :visible.sync="dialogFormVisible"
      center
      :modal-append-to-body="false"
    >
      <el-button
        type="primary"
        class="el-icon-printer"
        @click="print()"
        title="选择喷墨或激光打印机，根据下列纸张描述进行，设置并打印发货单据"
      >&nbsp;打印</el-button>
      <div ref="print">
        <div class="print-layout" style="page-break-after:always;width:642px">
          <div class="print-page" style="width:auto">
            <div class="ncap-order-style">
              <div class="ncap-order-details" v-if="order">
                <div class="tabs-panels">
                  <div class="misc-info">
                    <h3>收货人信息</h3>
                    <dl>
                      <dt>收件人：</dt>
                      <dd>{{order.consignee}}</dd>
                      <dt>联系电话：</dt>
                      <dd>{{order.mobile}}</dd>
                      <dt>邮编：</dt>
                      <dd>{{order.zipcode}}</dd>
                    </dl>
                    <dl>
                      <dt>邮箱：</dt>
                      <dd>{{order.email}}</dd>
                    </dl>
                    <dl>
                      <dt>收货地址：</dt>
                      <dd>{{order.address}}</dd>
                    </dl>
                  </div>

                  <div class="contact-info">
                    <h3>订单详情</h3>
                    <dl>
                      <dt>下单日期：</dt>
                      <dd>{{order.add_time_detail}}</dd>
                      <dt>订单号：</dt>
                      <dd>{{order.order_sn}}</dd>
                      <dt>支付方式：</dt>
                      <dd>{{order.pay_name}}</dd>
                    </dl>
                    <dl>
                      <dt>配送方式：</dt>
                      <dd>{{order.shop_id ? '自提' : order.shipping_name}}</dd>
                      <dt>订单总价：</dt>
                      <dd>{{order.total_amount | toFixed}}</dd>
                      <dt>商品价格：</dt>
                      <dd>{{order.goods_price | toFixed}}</dd>
                    </dl>
                    <dl>
                      <dt>配送费用：</dt>
                      <dd>{{order.shipping_price | toFixed}}</dd>
                      <dt>订单优惠：</dt>
                      <dd>{{order.coupon_price | toFixed}}</dd>
                      <dt>使用积分：</dt>
                      <dd>{{order.integral}}</dd>
                    </dl>
                    <dl>
                      <dt>使用余额：</dt>
                      <dd>{{order.user_money | toFixed}}</dd>
                      <dt>应付金额：</dt>
                      <dd>{{order.order_amount | toFixed}}</dd>
                      <dt>发票抬头：</dt>
                      <dd>{{order.invoice_title}}</dd>
                      <dt>纳税人识别号：</dt>
                      <dd>{{order.taxpayer}}</dd>
                    </dl>
                  </div>

                  <div class="goods-info">
                    <h4>商品信息</h4>
                    <table>
                      <thead>
                        <tr>
                          <th>商品名称</th>
                          <th>商品货号</th>
                          <th>规格属性</th>
                          <th>数量</th>
                          <th>单价</th>
                          <th>单品小计</th>
                        </tr>
                      </thead>
                      <tbody>
                        <tr v-for="og in order.order_goods">
                          <td style="text-align: center;">{{og.goods_name}}</td>
                          <td class="w80">{{og.goods_sn}}</td>
                          <td class="w60">{{og.spec_key_name}}</td>
                          <td class="w100">{{og.goods_num}}</td>
                          <td class="w60">{{og.goods_price | toFixed}}</td>
                          <td class="w80">{{og.goods_total | toFixed}}</td>
                        </tr>
                      </tbody>
                    </table>
                  </div>
                  <div class="total-amount contact-info">
                    <h3>
                      订单总额：
                      <strong style="color:#777">&yen;{{order.goods_price | toFixed}}</strong>
                    </h3>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import {
  noAgreeCancelPayOrder,
  cancelPayOrder,
  getOrder,
  getUser,
  getDeliveryDocs,
  getExpress,
  getOrderAction
} from "@/utils/api";
export default {
	inject:['reload'],
  data() {
    return {
      currentPage: this.$route.params.currentPage || 1,
      orderSn: this.$route.params.sn,
      order: null,
      express: [],
      deliverys: [],
      actionLog: null,
      dialogFormVisible: false,
      refundType: 0,
      payStatus: 3,
      isLoading: false,
      errResult: {}
    };
  },
  created() {
    this.getOrder();
  },
  methods: {
    getOrder() {
      var that = this;
      getOrder({
        order_sn: this.orderSn
      }).then(function(res) {
        that.order = res;
        that.getOrderUser();
        that.getDeliveryDocs();
        that.getActionLog();
      });
    },
    getOrderUser() {
      var that = this;
      getUser({
        user_id: this.order.user_id
      }).then(function(res) {
        that.order.user = res;
      });
    },
    getDeliveryDocs() {
      var that = this;
      getDeliveryDocs({ order_id: that.order.order_id }).then(function(res) {
        if (res) {
          that.deliverys = res;
          res.forEach(e => {
            var params = {
              shipping_code: e.shipping_code,
              invoice_no: e.invoice_no,
              mobile: e.mobile
            };
            getExpress(params).then(function(res) {
              if (res.result != false) {
                that.express.push(res);
              }
            });
          });
        }
      });
    },
    refundHandle() {
		var that = this
		if(that.payStatus == 3){
			cancelPayOrder(that.refundType,{order_id: that.order.order_id , admin_note:that.order.admin_note}).then(function(res) {
			  if (res.status == 1) {
			    that.$message.success({
			      message: "操作成功",
			      onClose: function() {
			        that.reload();
			      }
			    });
			  } else {
			     that.$message.error("操作失败,失败原因：" + res.msg);
			  }
			});
		}else{
			noAgreeCancelPayOrder(that.order).then(function(res) {
			  if (res.status == 1) {
			    that.$message.success({
			      message: "操作成功",
			      onClose: function() {
					  that.reload();
			      }
			    });
			  } else {
			    that.$message.error("操作失败,失败原因：" + res.msg);
			  }
			});
		}
		
    },
    getActionLog() {
      var that = this;
      getOrderAction(that.order.order_id).then(function(res) {
        that.actionLog = res;
      });
    },
    print() {
      this.$print(this.$refs.print);
    }
  },
  filters: {
    toFixed(value) {
      if (typeof value == "number") {
        return value.toFixed(2);
      } else {
        return value;
      }
    }
  }
};
</script>

<style scoped>
.ncap-order-style .ncap-order-details {
  margin: 20px auto;
}
</style>
